<template>
  <div class="videoList">
    <VueXgplayer :config="configM3u8" :root-style="rootStyle" @player="Player = $event" />
  </div>
</template>

<script>
import VueXgplayer from '../../../components/xgplayer-m3u8'
export default {
  components: {
    VueXgplayer,
  },
  props: ['vedioPath'],
  data() {
    return {
      configM3u8: {
        id: this.vedioPath.cameraCode,
        url: this.vedioPath.liveIP,
        poster: require('../../../assets/background/background.jpg'),
        autoplay: false, // 自动播放
        loop: false,		// 循环
        autoplayMuted: true,
        fitVideoSize: 'fixWidth' | 'fixHeight',
        fluid: true,
        // fitVideoSize: 'auto', // 自适应视频内容宽高
        'webkit-playsinline': 'true',
        'x5-video-player-type': 'h5',
        'x5-video-player-fullscreen': 'false',
        'x5-video-orientation': 'landscape|portrait',
        'playsinline preload': 'auto',
        'playsinline': 'true'
      },
      rootStyle: {
        backgroundColor: 'rgba(0,0,0,0.87)',
      },
      Player: null
    }
  },
  mounted() {
    // console.log(this.vedioPath)
  }
}
</script>

<style lang="scss" scoped>
.videoList{
  width: 100%;

}
</style>
